<template>
  <div class="pagss">
    <div style="height: 20px;"></div>
    <Navvz></Navvz>
    <el-row>


      <el-col :span="24">
        <el-row>
          <el-col :span="24">
            <div class="panel-group2 ">
              <el-tabs v-model="activeName" @tab-click="handleClick" v-if="!this.ckxq_id">
                <el-tab-pane label="定制开发" name="first">
                  <div v-for="(item, index) in TaskList" :key="index">
                    <div class="row space-between mt10">
                      <div class="row_a_c">
                        <div v-if="item.type==1" class="wb center">脚本</div>
                        <div v-if="item.type==2" class="qz center">版本</div>
                        <div v-if="item.type==3" class="jz center">插件</div>
                        <img class="ml_12" style="width: 24px;height: 23px;" src="../../assets/images/jb.png" />
                        <div class="price" style="white-space: nowrap;">{{item.price}}元</div>
                        <div class="f_18 f_bold ">{{item.title}}</div>
                        <img v-if="item.task_status==1" class="ml_12" style="width: 15px;height: 21px;"
                          src="../../assets/images/huo.png" />
                        <img v-if="item.task_status==2" class="ml_12" style="width: 15px;height: 21px;"
                          src="../../assets/images/huo2.png" />

                        <div v-if="item.task_status==1" class="xfb center">新发布</div>
                        <div v-if="item.task_status==2" class="jxz center">用户已接单</div>
                        <div v-if="item.task_status==3" class="yjs center">已付预付款</div>
                        <div v-if="item.task_status==4" class="yjs center">用户确认完成</div>
                        <div v-if="item.task_status==5" class="yjs center">商家确认完成</div>
                        <div v-if="item.task_status==6" class="yjs center">申请提现</div>
                        <div v-if="item.task_status==7" class="yjs center">提现成功</div>
                        <div v-if="item.task_status==8" class="yjs center">已过期</div>
                        <div v-if="item.task_status==9" class="yjs center">商家投诉</div>
                        <div v-if="item.task_status==10" class="yjs center">投诉已处理</div>
                      </div>
                      <div class="cpxq cursor" @click="ckxq(item)">查看详情 ></div>
                    </div>
                    <el-divider></el-divider>
                  </div>


                  <div class="center ">
                    <pagination v-show="total>0" :total="total" :page.sync="queryParams.page"
                      :limit.sync="queryParams.pageSize" @pagination="getList" />
                  </div>
                </el-tab-pane>
                <el-tab-pane label="招聘信息" name="second">
                  <Job></Job>
                </el-tab-pane>

                <el-tab-pane label="发布求职" name="third">
                  <Applicant class="center"></Applicant>
                </el-tab-pane>


              </el-tabs>
              <!-- 任务详情+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
              <TaskDetails @fanghui="fanghui" v-else :childProp="info"></TaskDetails>
              <!-- 任务详情=========================================================================== -->



            </div>
          </el-col>
        </el-row>


      </el-col>


    </el-row>






  </div>
</template>

<script>
  import CountTo from 'vue-count-to'
  import Cookies from 'js-cookie'
  import Vue from 'vue';

  import Navvz from "@/components/Navvz";

  import Sidebartss from "@/components/Sidebartss";
  import * as Database from "@/api/system/database";

  import Job from "@/views/center/job";

  import TaskDetails from "@/views/center/taskDetails";
  import Applicant from "@/views/center/applicant";

  import * as Task from "@/api/operation/task";

  export default {
    name: 'Index',
    components: {
      CountTo,
      Navvz,
      Sidebartss,
      Job,
      TaskDetails,
      Applicant,


    },
    data() {
      return {
        ckxq_id: '',
        activeName: 'first',
        user_id: '',
        // 总条数
        total: 0,
        info: {}, //任务详情
        TaskList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,

        // 查询参数
        queryParams: {
          noPage: 1,
          pageSize: 10
        },
        loading: false,
      }
    },
    created() {
      this.user_id = localStorage.getItem('user_id')
      this.getList()

    },
    mounted() {

    },
    methods: {
      //查看详情
      ckxq(item) {
        console.log('item', item)


        this.info = item;
        this.info.surplus_data = this.daysDiff(item.start_time, item.end_time)
        this.ckxq_id = 1;
      },



      daysDiff(startDate, endDate) {
        const start = new Date(startDate);
        const end = new Date(endDate);
        const diff = Math.floor((end - start) / (1000 * 60 * 60 * 24));
        return diff;
      },

      handleClick() {

      },
      //子组件调用 返回
      fanghui() {
        this.ckxq_id = '';
        this.getList();
      },

      /** 修改按钮操作查详情 */
      getList() {
        this.queryParams.type_pj = 1
        Task.List(this.queryParams).then(response => {
          this.TaskList = response.data.list;
          this.total = response.data.pagination.totalCount;
        });
      },

    }
  }
</script>


<style lang="scss" scoped>
  .pagss {
    height: 100%;
    background: #E4EEF9;
  }




  .panel-group2 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    height: 100%;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #fff;
    background: #3FC1C9 ;
    padding-left: 20px;
  }

    ::v-deep .el-tabs__item:hover {
      color: #A5EDF1 !important;
      }



  ::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2),
  .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
    padding-left: 20px;
  }

  ::v-deep .el-tabs--top .el-tabs__item.is-top:last-child,
  .el-tabs--top .el-tabs__item.is-bottom:last-child,
  .el-tabs--bottom .el-tabs__item.is-top:last-child,
  .el-tabs--bottom .el-tabs__item.is-bottom:last-child {
    padding-right: 20px;
  }

  ::v-deep .el-divider--vertical {
    height: 100px;
  }

  ::v-deep .pagination-container .el-pagination {

    position: relative;
  }



  ::v-deep .el-dialog__header {
    padding: 20px;
    padding-bottom: 0;
  }




  .wb {
    width: 103px;
    height: 34px;
    background: #F9773E;
    border-radius: 5px;
    margin-left: 20px;

    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;

    transform: skew(-15deg);
  }

  .price {
    width: 110px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #F9AC3E;
    margin-right: 30px;
  }

  .jxz {
    min-width: 60px;
    height: 22px;
    background: #FFFFFF;
    border: 1px solid #DA2710;
    border-radius: 6px;

    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #DE432E;
    margin-left: 20px;
  }

  .jz {
    min-width: 103px;
    height: 34px;
    background: #5ECE1B;
    border-radius: 5px;
    margin-left: 20px;

    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;

    transform: skew(-15deg);
  }


  .xfb {
    min-width: 60px;
    height: 22px;
    background: #FFFFFF;
    border: 1px solid #FF8B1A;
    border-radius: 6px;

    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FF8B1A;
    margin-left: 20px;
  }

  .yjs {
    min-width: 60px;
    height: 22px;
    background: #FFFFFF;
    border: 1px solid #6C6C6C;
    border-radius: 6px;

    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #6C6C6C;
    margin-left: 20px;
  }

  .cpxq {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #969696;
  }

  .qz {
    width: 103px;
    height: 34px;
    background: #3E5DF9;
    border-radius: 5px;
    margin-left: 20px;

    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;

    transform: skew(-15deg);
  }
</style>
